<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="shortcut icon" type="image/png" href="./favicon.png"/>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico"/>
    <title>头像计数</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="./css/bootstrap.min.css" >
    <link rel="stylesheet" href="./css/main.css" >
    <style type="text/css">
      body{
        background-color: #f5f5f5;
      }
    </style>
  </head>
  <body>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="./js/jquery.slim.min.js"></script>
    <script src="./js/popper.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>

    <div class="container-fluid">
      <nav class="navbar navbar-expand-sm navbar-light bg-sport">
        <a class="navbar-brand" href="#">
          <!-- <img src="./images/logo.png" style="height: 50px;" /> -->
          <span>头像计数</span>
        </a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarText">
          <ul class="navbar-nav ml-auto mr-auto">           
          </ul>

          <ul class="nav justify-content-end">
            <li class="nav-item">
            </li>

            <li class="nav-item">
            </li>

            <li class="nav-item">
            </li>
          </ul>
        </div>
      </nav>

      <div class="text-center">
          <p>计数结果: <span id="count-span"></span></p>
          
          <div id="count-image">

          </div>

      </div>


      <div class="footer">
        <p>100wits.com</p>
        <p>Copyright © 2017 All rights reserved</p>
      </div>
    
    </div>

    <script type="text/javascript">
      $( document ).ready(function() {
        console.log( "ready!" );
         
        websocket = new WebSocket('ws://192.168.3.53:18802/api/ws')

        websocket.onmessage = function (event) {
            //console.log(event)
            if (typeof(event.data)=="string"){ 
                let msg = JSON.parse(event.data)
                handleTextData(msg)
            } else {
                var reader = new FileReader();  
                reader.onload = function (evt) {  
                    if(evt.target.readyState == FileReader.DONE){  
                        var url = evt.target.result;
                        console.log(url)
                        var img = document.getElementById("count-image");
                        img.innerHTML = "<img src = " + url + " />";  
                    }
                }
                reader.readAsDataURL(event.data);
            }
        }

        websocket.onopen = function (event) {
            console.log('websocket 连接打开')
        }

        websocket.onclose = function (event) {
            console.log('websocket 连接关闭')
        }

      });

      function handleImageData(data) {
          //console.log(data.length)
      }

      function handleTextData(msg) {
          var element = document.getElementById("count-span");
          element.innerText = msg.count;
          //console.log(msg)
      }

    </script>
    
  </body>
</html>